<template>
  <el-container direction="vertical">
    <el-row>
      <el-col :span="4">
        <el-input
          placeholder="请输入查询关键字"
          v-model="keywords"
          style="width: 100%"
          @keyup.native.enter="getGoodsList"
          clearable
          prefix-icon="el-icon-search"
        >
        </el-input>
      </el-col>
      <el-col :span="2" :offset="1">
        <el-button type="primary" @click="getGoodsList" style="width: 100%">查询</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-table
        :data="goodsList"
        style="width: 100%"
      >
        <el-table-column
          prop="id"
          label="物资ID"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="物资名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="stock"
          label="库存数量"
          width="180">
        </el-table-column>
        <el-table-column
          prop="price"
          label="物资价格"
          width="180">
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          width="180">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row,1)">领取</el-button>
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row,2)">补充库存</el-button>
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              circle
              @click="reviseGoods(scope.row)">
            </el-button>
            <el-button
              size="mini"
              type="danger"
              circle
              icon="el-icon-delete"
              @click="handleDelete(scope.$index, scope.row)">
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <el-pagination
        background
        @current-change="currentChange"
        layout="prev, pager, next"
        :total="totalPage">
      </el-pagination>
    </el-row>
    <el-dialog
      title="修改物资信息"
      :visible.sync="dialogVisible"
      width="30%">
      <div>
        <el-form :model="goodsForm" ref="goodsForm" label-width="auto" class="demo-ruleForm goodsForm" >
          <!--:model是语法糖，全称是v-on:model,其他同理，绑定class属性,demo-ruleForm" goodsForm-->
          <el-form-item label="物资名称" prop="name">
            <!--prop传值的内容对象是name-->
            <el-input prefix-icon="el-icon-goods" v-model="goodsForm.name" clearable placeholder="请输入物资名称"></el-input>
            <!--icon就是图标的意思，placeholder起到提示的作用-->
          </el-form-item>
          <el-form-item label="库存数量" prop="stock">
            <el-input prefix-icon="el-icon-goods" v-model="goodsForm.stock" clearable placeholer="请输入库存数量"></el-input>
          </el-form-item>
          <el-form-item label="物资价格" prop="price">
            <el-input prefix-icon="el-icon-goods" v-model="goodsForm.price" clearable placeholer="请输入库存价格"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input type="textarea" v-model="goodsForm.remark" clearable placeholer="请输入库存价格"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('goodsForm')">修改</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import Qs from 'qs'
export default {
  data(){
    return{
      goodsForm: {},
      goodsList:[],
      keywords:'',
      currentPage:1,
      pageSize: 10,
      totalCount:0,
      totalPage:0,
      dialogVisible: false,
      user: {}
    }
  },
  computed: {
    search() {
      return this.keywords;
    }
  },
  watch: {
    search(newValue, oldValue) {
      if (newValue === "") {
        //如果为空，执行方法获取list
        this.getGoodsList();
      }
    }
  },
  created() {
    let userStr = sessionStorage.getItem('user') || '{}';
    this.user = JSON.parse(userStr);
    this.getGoodsList();
  },
  methods:{
    reviseGoods(row) {
      this.goodsForm = JSON.parse(JSON.stringify(row));
      this.dialogVisible = true;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = Qs.stringify(this.goodsForm);
          this.$http.put('/goods//updateGoods',params ).then((response) => {
            if (response.status === 200) {
              if (response.data.code === 10000) {
                this.$notify({
                  title: '修改成功',
                  type: 'success'
                });
                this.getGoodsList();
                this.dialogVisible = false;
              } else {
                this.$notify.error({
                  title: '错误',
                  message: response.data.msg
                });
              }
            } else {
              this.$notify.error({
                title: '错误',
                message: response.status + response.statusText
              });
            }
          })
        }
      });
    },
    getGoodsList(){
      this.$http.get('/goods/query',{
        params:{
          keywords:this.keywords,
          pageSize:this.pageSize,
          currentPage:this.currentPage
        }
      }).then((response)=>{
        if(response.status === 200){
          if(response.data.code === 10000){
            this.totalCount = response.data.data.totalCount;
            this.totalPage = response.data.data.totalPage * 10;
            this.goodsList = response.data.data.data;
          }else{
            this.goodsList = [];
            this.$notify.error({
              title: '错误',
              message: response.data.msg,
              duration: 1000
            });
          }
        }else{
          this.$notify.error({
            title: '错误',
            message: response.status + response.statusText,
            duration: 1000
          });
        }
      }).catch((error)=>{
        this.$notify.error({
          title: '错误',
          message: error.status + error.statusText,
          duration: 1000
        });
      })
    },
    currentChange(pageNo){
      this.currentPage = pageNo;
      this.getGoodsList();
    },
    handleEdit(index,row,type){
      let msg = type === 1?'请输入要领取的数量':'请输入要补充的数量';
      this.$prompt(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
        if(isNaN(value)||value<1){
          this.$notify.error({
            title: '错误',
            message: '请输入正确的数字!',
            duration: 1000
          });
        }else {
          value = type === 1?(0-value):value;
          let params = Qs.stringify({
            id:row.id,
            userId: this.user.id,
            quantity:value
          })
          this.$http.post('/goods/stock',params).then((response)=>{
            if(response.status === 200){
              if(response.data.code === 10000){
                this.$notify({
                  title: '成功',
                  message: response.data.data,
                  type:'success',
                  duration: 1000
                });
                this.getGoodsList();
              }else{
                this.$notify.error({
                  title: '错误',
                  message: response.data.msg,
                  duration: 1000
                });
              }
            }else{
              this.$notify.error({
                title: '错误',
                message: response.status + response.statusText,
                duration: 1000
              });
            }
          })
        }
      });
    },

    handleDelete(index,row){
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = Qs.stringify({
          id:row.id
        })
        this.$http.post('/goods/del',params)
          .then((response)=>{
            if(response.status === 200){ // 先判断状态码
              if(response.data.code === 10000){ // 再判断结果码
                this.$notify({
                  title: '成功',
                  message: response.data.data,
                  type:'success',
                  duration: 1000
                });
                this.getGoodsList();
              }else{
                this.$notify.error({
                  title: '错误',
                  message: response.data.msg,
                  duration: 1000
                });
              }
            }else{
              this.$notify.error({
                title: '错误',
                message: response.status + response.statusText,
                duration: 1000
              });
            }
          })
      });
    }
  }
}
</script>

<style scoped>
.el-row{
  margin-bottom: 15px;
}
</style>
